<template>
  <div>
    <Layout>
        <Header>
            <Menu :MenuItem='menuitem'></Menu>
        </Header>
        <Content style="text-align: center;background: #ffffff;padding: 15px 20px;">
          <transition name="slide-right" mode="out-in">
            <router-view class="child-view"/>
          </transition>
        </Content>
        <!-- <Footer style="text-align: center;">by cwj</Footer> -->
    </Layout>
  </div>
</template>
<script type="text/javascript">
  import About from '@/views/About.vue'
  import Menu from '@/components/main/Menu.vue'
  export default {
    data(){
      return{
        msg:'测试props',
        menuitem:[
          {
            title:'首页',
            icon:'ios-paper',
            name:'1',
            to:'/',
            children:[]
          },{
            title:'内容管理',
            icon:'ios-paper',
            name:'2',
            to:'/about',
            children:[]
          },{
            title:'用户管理',
            icon:'ios-people',
            name:'3',
            to:'/useradmin',
            children:[]
          },{
            title:'综合设置',
            icon:'ios-construct',
            name:'4',
            to:'/setting',
            children:[]
          }
        ]
      }
    },
    components:{
      About,Menu
    },
    created(){

    }
  }
</script>
<style lang="less" scoped>
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

